<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas 画图</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            background: #ddd;
        }
    </style>
</head>
<body>
<canvas id="app" width="500" height="500"></canvas>
<script>
    // 吃豆子的图形
    // let app = document.getElementById("app");
    // 画笔 画圆形 0~360  ==  0~2PI
    // 公式： 90(角度)*Math.PI/180 = 弧度
    let ctx = app.getContext("2d");
    // closeMouth(ctx);
    openMouth(ctx);

    let idx = 0;
    let timer = setInterval(function () {
        ctx.clearRect(0, 0, 500, 500);
        idx++;
        if (idx % 2 === 0) {
            openMouth(ctx);
        } else {
            closeMouth(ctx);
        }
    }, 1000);

    function closeMouth(ctx) {
        // 1. 绘制外围轮廓
        ctx.beginPath();
        ctx.arc(250, 200, 100, 0, 2 * Math.PI);
        ctx.lineTo(250, 200);
        ctx.stroke();
        // 2. 填充眼球
        ctx.beginPath();
        ctx.arc(270, 155, 25, 0, 2 * Math.PI);
        ctx.fillStyle = "#38f";
        ctx.fill();
        // 3. 填充眼神
        ctx.beginPath();
        ctx.arc(273, 150, 3, 0, 2 * Math.PI);
        ctx.fillStyle = "#fff";
        ctx.fill();
        ctx.closePath();
    }

    function openMouth(ctx) {
        // 1. 绘制外围轮廓
        ctx.beginPath();
        ctx.arc(250, 200, 100, 40 * Math.PI / 180, -40 * Math.PI / 180);
        ctx.lineTo(250, 200);
        ctx.closePath();
        ctx.stroke();
        // 填充眼球
        ctx.beginPath();
        ctx.arc(270, 155, 25, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillStyle = "#38f";
        ctx.fill();
        // 画眼球
        ctx.beginPath();
        ctx.arc(273, 150, 3, 0, 2 * Math.PI);
        ctx.fillStyle = "#fff";
        ctx.fill();
    }
</script>
</body>
</html>